import React, { useState } from "react";
import {
  Box,
  Typography,
  Grid,
  Card,
  Button,
  Select,
  MenuItem,
  ThemeProvider,
  CssBaseline,
} from "@mui/material";
import {
  RadarChart,
  PolarGrid,
  PolarAngleAxis,
  Radar,
  Legend,
  LineChart,
  Line,
  XAxis,
  YAxis,
  CartesianGrid,
  Tooltip,
  BarChart,
  Bar,
  ResponsiveContainer,
} from "recharts";
import theme from "../themes/theme ";

const capabilityData = [
  { subject: "战略规划", A: 4.2, B: 3.8, fullMark: 5 },
  { subject: "技术能力", A: 3.5, B: 3.0, fullMark: 5 },
  { subject: "数据治理", A: 2.8, B: 3.1, fullMark: 5 },
  { subject: "业务创新", A: 4.5, B: 4.0, fullMark: 5 },
  { subject: "组织变革", A: 3.2, B: 3.4, fullMark: 5 },
];

const trendData = [
  { month: "6月", value: 3.1 },
  { month: "9月", value: 2.9 },
  { month: "12月", value: 3.2 },
  { month: "3月", value: 3.5 },
  { month: "6月", value: 3.8 },
];

const projectList = [
  { name: "供应链数字化转型", owner: "王总监", status: "预警", progress: 30 },
  { name: "人才能力提升计划", owner: "陈总监", status: "进行中", progress: 60 },
  { name: "数字营销平台构建", owner: "赵经理", status: "已完成", progress: 100 },
];

const businessScoreMap = {
  营销中心: [
    { name: "战略规划", score: 4.2 },
    { name: "技术能力", score: 3.5 },
    { name: "数据治理", score: 2.8 },
    { name: "业务创新", score: 4.5 },
    { name: "组织变革", score: 3.2 },
  ],
  生产部门: [
    { name: "战略规划", score: 3.8 },
    { name: "技术能力", score: 3.2 },
    { name: "数据治理", score: 3.0 },
    { name: "业务创新", score: 3.9 },
    { name: "组织变革", score: 3.5 },
  ],
};

const Dashboard = () => {
  const [unit, setUnit] = useState("营销中心");
  const businessScores = businessScoreMap[unit];

  return (
    <ThemeProvider theme={theme}>
      <CssBaseline />
      <Box sx={{ px: 4, py: 6, bgcolor: "background.default", color: "text.primary", minHeight: "100vh" }}>
        <Typography variant="h4" align="center" gutterBottom>
          领导驾驶舱界面设计
        </Typography>

        <Grid container spacing={4}>
          {/* 左侧模块：数字化能力 + 趋势分析 */}
          <Grid item xs={12} md={4}>
            <Card sx={{ p: 2, borderRadius: 3, boxShadow: 3 }}>
              <Typography variant="h6" gutterBottom>
                企业整体数字化能力
              </Typography>
              <ResponsiveContainer width="100%" height={250}>
                <RadarChart data={capabilityData}>
                  <PolarGrid />
                  <PolarAngleAxis dataKey="subject" stroke="#ccc" />
                  <Radar name="当前评估" dataKey="A" stroke="#8884d8" fill="#8884d8" fillOpacity={0.6} />
                  <Radar name="上期评估" dataKey="B" stroke="#82ca9d" fill="#82ca9d" fillOpacity={0.3} />
                  <Legend />
                </RadarChart>
              </ResponsiveContainer>
            </Card>

            <Card sx={{ mt: 3, p: 2, borderRadius: 3, boxShadow: 3 }}>
              <Typography variant="h6" gutterBottom>
                能力趋势分析
              </Typography>
              <ResponsiveContainer width="100%" height={200}>
                <LineChart data={trendData}>
                  <CartesianGrid strokeDasharray="3 3" />
                  <XAxis dataKey="month" stroke="#ccc" />
                  <YAxis stroke="#ccc" />
                  <Tooltip />
                  <Line type="monotone" dataKey="value" stroke="#8884d8" strokeWidth={2} />
                </LineChart>
              </ResponsiveContainer>
            </Card>
          </Grid>

          {/* 中间模块：重点工程项目 */}
          <Grid item xs={12} md={4}>
            <Card sx={{ p: 2, borderRadius: 3, boxShadow: 3 }}>
              <Typography variant="h6">重点工程与项目</Typography>
              {projectList.map((proj, idx) => (
                <Box key={idx} my={2}>
                  <Typography>{proj.name}（{proj.status}）</Typography>
                  <Typography variant="caption">负责人：{proj.owner}</Typography>
                  <Box sx={{ background: "#444", height: 10, borderRadius: 5, mt: 1 }}>
                    <Box sx={{ width: `${proj.progress}%`, background: "#4fc3f7", height: "100%", borderRadius: 5 }} />
                  </Box>
                </Box>
              ))}
              <Box mt={2}>
                <Typography>12 总项目数 / 5 正常进行 / 4 需关注 / 3 预警</Typography>
              </Box>
            </Card>
          </Grid>

          {/* 右侧模块：业务单元评估 */}
          <Grid item xs={12} md={4}>
            <Card sx={{ p: 2, borderRadius: 3, boxShadow: 3 }}>
              <Typography variant="h6">业务单元评估结果</Typography>
              <Select
                fullWidth
                value={unit}
                onChange={(e) => setUnit(e.target.value)}
                sx={{ mt: 1, backgroundColor: '#0f1d33', color: '#fff' }}
              >
                {Object.keys(businessScoreMap).map((key) => (
                  <MenuItem key={key} value={key}>{key}</MenuItem>
                ))}
              </Select>

              <ResponsiveContainer width="100%" height={250}>
                <BarChart data={businessScores} layout="vertical" margin={{ top: 20, right: 20, left: 20, bottom: 20 }}>
                  <CartesianGrid strokeDasharray="3 3" />
                  <XAxis type="number" stroke="#ccc" />
                  <YAxis dataKey="name" type="category" stroke="#ccc" />
                  <Tooltip />
                  <Bar dataKey="score" fill="#8884d8" />
                </BarChart>
              </ResponsiveContainer>

              <Box display="flex" justifyContent="space-between" mt={2}>
                <Button variant="outlined" color="info">
                  详细分析
                </Button>
                <Button variant="outlined" color="secondary">
                  导出报告
                </Button>
              </Box>
            </Card>
          </Grid>
        </Grid>
      </Box>
    </ThemeProvider>
  );
};

export default Dashboard;